<template>
  <div class="mt12">
    <div class="flex_aic gap-12">
      <div class="flex1 h-236 overflow-y-auto pl20 pr20 border">
        <div
          class="pl20 pr20 lht-35 h-35 cursor-pointer"
          :class="`${formData.skuClassify1Id === item.id ? 'active' : ''}`"
          v-for="(item, index) in typeTree"
          @click="formData.skuClassify1Id = item.id"
        >
          {{ item["name" + locale] }}
        </div>
      </div>
      <div class="flex1 h-236 overflow-y-auto pl20 pr20 border">
        <div
          class="pl20 pr20 lht-35 h-35 cursor-pointer"
          :class="`${formData.skuClassify2Id === item.id ? 'active' : ''}`"
          v-for="(item, index) in twoList"
          @click="formData.skuClassify2Id = item.id"
        >
          {{ item["name" + locale] }}
        </div>
      </div>
    </div>
    <div
      class="flex_aic tips tips pl20 mt12"
      :class="typeLabels.length > 0 ? 'hot' : ''"
    >
      {{ $t('goodsList.goodsRelease.您选择商品类别是') }}{{ typeLabels.map((v) => v['name' + locale]).join(" > ") }}
    </div>
    <div class="flex_aic_jcc mt32">
      <div class="btn" @click="next">{{ $t('goodsList.goodsRelease.下一步填写商品信息') }}</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { releaseStore, formData, typeTree, twoList, typeLabels } from "../releaseStore";
import { ElMessage } from "element-plus";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();
const next = () => {
  if (formData.skuClassify1Id && formData.skuClassify2Id) {
    releaseStore.step = 1;
  } else {
    ElMessage.warning(t('goodsList.goodsRelease.请选择商品分类'));
  }
};

const getSkuClassify = () => {
  Api.businessCategory().then((res) => {
    typeTree.value = res.data
  });
};

onMounted(() => {
  getSkuClassify();
});
</script>
<style lang="scss" scoped>
.h-236 {
  height: 236px;
}

.h-35 {
  height: 35px;
}

.border {
  border: 1px dotted #e6e9ee;
}

.active {
  background: rgba(255, 113, 30, 0.1);
  color: var(--el-color-primary);
}

.tips {
  height: 40px;
  border: 1px dotted #ffad2b;
  background: #fffadf;
  color: #ff3710;

  &.hot {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
    background: rgba(255, 113, 30, 0.1);
  }
}

.btn {
  display: inline-block;
  margin-top: 16px;
  margin-bottom: 20px;
  padding: 12px 40px;
  border-radius: 2px;
  background: var(--el-color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
</style>
